<template>
  <el-dialog width="90%" title="证书操作【https】" :visible.sync="dialogCertificateVisible" @close="closeDialogCertificate">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="域名" prop="name">
        <el-input v-model="ruleForm.domain_name" readonly></el-input>
      </el-form-item>
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="免费证书" name="free">
          <el-form-item>
            <div style="height: 50px"></div>
            <el-button v-if="ruleForm.cert_deploy">已经部署</el-button>
            <el-popconfirm
              title="确定部署此证书吗？"
              v-if="!ruleForm.cert_deploy"
              @onConfirm="onDeploymentCertificate('free')"
            >
              <el-button slot="reference" type="primary" >立即部署</el-button>
            </el-popconfirm>
          </el-form-item>
        </el-tab-pane>
<!--        <el-tab-pane label="其他证书" name="2">其他证书</el-tab-pane>-->
      </el-tabs>

    </el-form>
  </el-dialog>

</template>

<script>
import { update, getInfo } from '@/api/domain-name'
export default {
  name: 'CertificateFrom',
  components: {},
  props: ['domainNameId', 'dialogCertificateVisible'],
  data() {
    return {
      ruleForm: {
        cert_deploy: 0
      },
      rules: {
      },
      activeName: 'free'
    }
  },
  created() {
    console.log(this.domainNameId, 'domainNameId')
    if (this.domainNameId) {
      this.onInfo()
    }
  },
  computed: {
  },
  methods: {
    notifyMessage(res) {
      this.$notify({
        message: res.message,
        type: 'success',
        duration: 1 * 1000
      })
      this.onInfo()
    },
    onInfo() {
      getInfo(this.domainNameId).then(res => {
        this.ruleForm = res.data
      })
    },
    closeDialogCertificate() {
      this.dialogCertificateVisible = false
      this.domainNameId = ''
      this.$emit('emitDialogCertificate', { dialogCertificateVisible: this.dialogCertificateVisible})
    },
    getLoading() {
      return this.$loading({
        lock: true,
        text: '证书正在部署',
        spinner: 'el-icon-loading'
      })
    },
    onDeploymentCertificate(type) {
      const loading = this.getLoading()
      update(this.domainNameId, { cert_type: type }).then(res => {
        this.notifyMessage(res)
        loading.close()
      }).catch(res => {
        loading.close()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
